<template>
  <div class="ComprehensiveInfo">

    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="4">
        <span>
          <router-link :to="{path:'/monitor'}"><img :src="returnnormalpress" class="returnnormalpress" /></router-link>
        </span>
        <span><img :src="realtimeindex" class="equiplist" /></span>
        <span class="description">监控</span>
      </el-col>
      <el-col :xs="7" :sm="6" :md="18" :lg="18" :xl="21" class="con">
      </el-col>
    </el-row>
    <div class="ComprehensiveContent">
      <div class="Cheader" @mouseover="showList">
        <div class="rightMapTitle">
          <el-row>
            <el-col :span="15">
              <div class="grid-content bg-purple">
                <span class="title">&nbsp;监测地图</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="margin-right: 20px; float: right">
                <span style=" float:left;width: 20px;height: 20px; background-color: #00a9fc;margin:6px 6px 0 20px;padding-top: 1px"></span>
                <span style="padding-right: 30px; padding-top: 1px; float: left"> 总数 {{this.total_equip}}</span>
                <span style="float:left;width: 20px;height: 20px; background-color: #3FB05A; margin:6px 6px 0 20px;"></span>
                <span style="padding-right: 30px; padding-top: 1px; float: left"> 启动 {{this.on_line}}</span>
                <span style=" float:left;width: 20px;height: 20px; background-color: #f43b42; margin:6px 6px 0 20px;"></span>
                <span style="padding-right: 30px; float: left; padding-top: 1px"> 关机 {{this.shut_down}}</span>
                <span style="float:left;width: 20px;height: 20px; background-color: #999999; margin:6px 6px 0 20px;"></span>
                <span style="float: left; padding-top: 1px;"> 离线 {{this.off_line}}</span>

              </div>
            </el-col>
            <el-col :span="1">
              <div @mouseover="showList" @mouseleave="leaves" class="grid-content bg-purple" style="float: right; margin-right: 20px">

                <span title="设备列表" style=" cursor: pointer">
                  <router-link to="/monitor/iots">
                    <img :src="seen" style="vertical-align: middle;margin-top: -3px" />
                  </router-link>

                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="centerList">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class=" bg-purple ">
              <div class="rightMap">
                <div class="rightMapTitle1" v-show="this.showTitle">
                  <el-form :inline="true" class="demo-form-inline searchForm" :model="this.submiteMap">
                    <el-form-item class="handItem" label="区域:">
                      <div id="app">
                        <el-cascader class="cityMessage" size="large" clearable :options="citys" v-model="addMirror.city"
                          @change="handleChange" placeholder="省/市/区" :change-on-select="changeOnSelect">
                        </el-cascader>
                      </div>
                    </el-form-item>
                    <el-form-item class="handItem" label="设备类型:">
                      <el-select v-model="submiteMap.condition.equip_type" clearable placeholder="设备类型" style="width: 140px">
                        <el-option v-for="item in EquipmanageStatus" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="handItem" label="状态:">
                      <el-select v-model="submiteMap.condition.status" placeholder="状态" clearable style="width: 140px">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="handItem" label="维保到期:">
                      <el-select v-model="submiteMap.condition.mainten_expire" clearable placeholder="维保到期">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="handItem" label="年审到期:">
                      <el-select v-model="submiteMap.condition.verifi_expire" clearable placeholder="年审到期">
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="handItem">
                      <el-input class="handInput" v-model="submiteMap.condition.name" placeholder="客户名称/设备名称/出厂编号"
                        style="width: 210px"></el-input>
                    </el-form-item>
                    <el-form-item class="handItem">
                      <el-button type="primary" @click="seachMap">查询</el-button>
                      <el-button type="info" @click="clearBtn">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="bMap">
                  <div class="showStatus">
                    <div class="hoverImg" @click="this.showContent">
                      <img :src="xiangyoushouqiHover" v-if="this.btnStatus === true" />
                    </div>
                    <div class="rightBtn" @click="this.showContent" v-if="this.btnStatus === false">
                      <img :src="xiangzuo" v-if="this.btnStatus === false" />
                    </div>
                    <div class="mapRightList" v-show="this.btnStatus">
                      <div class="YuserName">
                        <p class="name">{{codeName}}</p>
                        <p class="name1">共<span style="color: #0072F3">{{this.equipCount}}</span>台设备</p>
                      </div>
                      <div class="YuserList" v-for="(listData,index) in grablistEquip1" :key="index">
                        <p>
                          <span><img :src="unRun" v-if="listData.status ==='0'" /></span>
                          <span><img :src="onRun" v-if="listData.status ==='1'" /></span>
                          <span style="margin-left: 10px">{{listData.pid}}</span>
                          <span style="color:#E6E6E6; margin-left: 10px ">|</span>
                          <span style="margin-left: 10px">{{listData.equip_cid}}</span>
                        </p>
                        <p class="listColor">
                          <!--{{listData.cids}}-->
                          <span @click="goGrab(listData)">实时监测</span>
                          <span>|</span>
                          <!--<span>统计数据</span>-->
                          <!--<span>|</span>-->
                          <span @click="goCurvet(listData)">参数曲线</span>
                          <span>|</span>
                          <span @click="goHistory(listData)">历史查询</span>
                          <span>|</span>
                          <span @click="goManage(listData)">配置管理</span>
                          <span>|</span>
                          <span @click="goRemoteUpdate(listData)">远程更新</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div id="assetMap" :style="{height:'42.6vw',width:'100%', color:'#fff',}"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import {
    Navbar,
    Sidebar,
    AppMain
  } from '../layout/components'
  import BaiduMap from '@/api/map.js'
  import {
    regionDataPlus,
    CodeToText
  } from 'element-china-area-data'
  import lists from '@/assets/home/listnormal.png'
  import listshove from '@/assets/home/listhover.png'
  import onRun from '@/assets/controlStation/onRun.png'
  import unRun from '@/assets/controlStation/unRun.png'
  import xiangyoushouqiHover from '@/assets/controlStation/xiangyoushouqiHover.png'
  import xiangzuo from '@/assets/controlStation/xiangzuo.png'
  import yanzhongjingaoicon from '@/assets/mapStatus/yanzhongjinggaoicon.png'
  import realtimeindex from '@/assets/home/realtimeindex.png'
  import returnnormalpress from '@/assets/home/returninvalid.png'

  export default {
    name: 'ComprehensiveInfo',
    components: {
      Navbar,
      Sidebar,
      AppMain
    },
    data() {
      return {
        index: 1,
        mapDD: {},
        unRun,
        onRun,
        xiangzuo,
        xiangyoushouqiHover,
        lists,
        yanzhongjingaoicon,
        realtimeindex,
        returnnormalpress,
        listshove,
        seen: '',
        showTitle: false,
        mapCountList: [], // 存储地图数据为空时 
        mapCount: 0,
        equipCount: '',
        Pid: '',
        citys: regionDataPlus,
        codeToText: CodeToText,
        total_equip: '',
        on_line: '',
        off_line: '',
        shut_down: '',
        cityCode: '',
        btnStatus: false,
        changeOnSelect: true,
        statusOptions: [{
            value: '1',
            label: '开机'
          },
          {
            value: '0',
            label: '关机'
          }
        ],
        options2: [{
            value: '1',
            label: '1月内维保到期'
          },
          {
            value: '2',
            label: '2月内维保到期'
          },
          {
            value: '3',
            label: '3月内维保到期'
          }
        ],
        options3: [{
            value: '1',
            label: '1月内年审到期'
          },
          {
            value: '2',
            label: '2月内年审到期'
          },
          {
            value: '3',
            label: '3月内年审到期'
          }
        ],
        /**
         *  以下为接口
         * */
        // 获取所有数据
        AllData: [],
        // 所有数据
        submitAll: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_equip_run_statis',
          datas: []
        },
        listEquip: [],
        listEquip1: [],
        listEquip2: '12123',
        // 所有设备
        AllEquipmanageData: [{
          name: '桥式起重机',
          cid: 'ZD201809000001',
          status: '0'
        }],
        submiteAllquipmanage: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_deploy_all_equip',
          city_code: ''
        },
        list: [],
        // 设备类型
        EquipmanageStatus: [],
        submiteEquipmanageStatus: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_type'
        },
        // 获取地图信息
        mapLists: [],
        addMirror: {
          area: '',
          equip_type: '',
          status: '',
          name: '',
          mainten_expire: '',
          verifi_expire: ''
        },
        city1: [],
        submiteMap: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_query_deploy_local',
          condition: {
            area: '',
            equip_type: '',
            status: '',
            name: '',
            mainten_expire: '',
            verifi_expire: ''
          }
        },
        city_code: '',
        grablistEquip1: [],
        codeName: '全部',
        map: '',
        QZnumber: '',
        plcNumber: '',
        compNumber: ''
      }
    },
    created() {
      this.engineData()
      this.queryEquipSta()
      this.queryAllEquipList()
      this.queryMapList()
      this.showList()
      this.leaves()
    },
    methods: {
      showList() {
        this.seen = this.lists
      },
      leaves() {
        this.seen = this.listshove
      },
      // 显示地图搜索栏
      showList() {
        this.showTitle = !this.showTitle
      },
      initMap() {
        BaiduMap.init()
          .then((BMap) => {
            this.mapDD = BMap
            this.map = new BMap.Map('assetMap', {
              enableMapClick: true
            })
            this.map.centerAndZoom(new BMap.Point(114.236458, 22.691286), 6)
            this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
            // 自定义覆盖物
            this.creatMp(BMap)
          })
      },
      creatMp(BMap) {
        let self = this
        for (let i = 0; i < this.mapLists.length; i++) {
          var p0 = this.mapLists[i].longitude
          var p1 = this.mapLists[i].latitude
          var marker = new BMap.Marker(new BMap.Point(p0, p1)) // 创建标注
          var opts = {
            position: marker, // 指定文本标注所在的地理位置
            offset: new BMap.Size(-30, 0) // 设置文本偏移量
          }
          var content = '<div class="exam_bus_sel_details" style="font-size: 12px; line-height: 25px;"><div>' +
            '<div class="exam_bus_sel_details_bus">' + this.mapLists[i].local + '<span>  |  </span>' + this.mapLists[i]
            .count + '</div>' +
            '</div></div></div>'
          this.map.addOverlay(marker)
          var label = new BMap.Label(content, opts) // 创建文本标注对象
          label.setStyle({
            color: '#fff',
            fontSize: '12px',
            height: '30px',
            lineHeight: '30px',
            fontFamily: '微软雅黑',
            backgroundColor: '#3FB05A',
            borderColor: '#fff',
            borderRadius: '4px',
            paddingLeft: '10px',
            paddingRight: '10px',
            cursor: 'pointer'
          })
          marker.setLabel(label)
          var code = this.mapLists[i].city_code
          var name = this.mapLists[i].local
          addClickHandler(content, label, code, name)
        }

        function addClickHandler(content, label, code, name) {
          label.addEventListener('onmouseover', function (e) {
            label.setStyle({
              color: '#fff',
              fontSize: '12px',
              height: '30px',
              lineHeight: '30px',
              fontFamily: '微软雅黑',
              backgroundColor: '#25B7C8',
              borderColor: '#fff',
              borderRadius: '4px',
              paddingLeft: '10px',
              paddingRight: '10px'
            })
          })
          label.addEventListener('onmouseout', function (e) {
            label.setStyle({
              color: '#fff',
              fontSize: '12px',
              height: '30px',
              lineHeight: '30px',
              fontFamily: '微软雅黑',
              backgroundColor: '#3FB05A',
              borderColor: '#fff',
              borderRadius: '4px',
              paddingLeft: '10px',
              paddingRight: '10px',
              cursor: 'pointer'
            })
          })
          label.addEventListener('click', function (e) {
            self.cityCode = code
            self.codeName = name
            self.submiteAllquipmanage.city_code = this.cityCode
            self.queryAllEquipList()
            self.btnStatus = true
          })
        }
      },
      handleChange() {
        // console.log(this.codeToText['440307'])
        console.log(this.addMirror)
        // console.log(this.codeToText[this.addMirror.city[0]])
        // console.log(this.codeToText[this.addMirror.city[1]])
        // console.log(this.codeToText[this.addMirror.city[2]])
        var shen = this.codeToText[this.addMirror.city[0]] || ''
        var shi = this.codeToText[this.addMirror.city[1]] || ''
        var qu = this.codeToText[this.addMirror.city[2]] || ''
        // for (var i = 0; i < this.citys.length; i++) {
        //   if (this.citys[i].value === this.addMirror.city[0]) {
        //     console.log(this.citys[i].label)
        //     shen = this.citys[i].label
        //     for (var o = 0; o < this.citys[i].children.length; o++) {
        //       if (this.citys[i].children[o].value === this.addMirror.city[1]) {
        //         shi = this.citys[i].children[o].label
        //         console.log(this.citys[i].children[o].label)
        //         for (var p = 0; p < this.citys[i].children[o].children.length; p++) {
        //           if (this.citys[i].children[o].children[p].value === this.addMirror.city[2]) {
        //             qu = this.citys[i].children[o].children[p].label
        //             console.log(this.citys[i].children[o].children[p].label)
        //           }
        //         }
        //       }
        //     }
        //   }
        // }
        // if (this.addMirror.city[1]) {
        //   console.log(1111)
        //   this.city1 = this.addMirror.city[1]
        // }else if(this.addMirror.city[2]){
        //   console.log(2222)
        //   this.city1 = this.addMirror.city[2]
        // }
        this.city1 = this.addMirror.city[2]
        this.submiteMap.condition.area = shen + shi + qu
        // console.log(this.submiteMap.condition.area)
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      // 获取总览数据
      engineData() {
        axios.post('/console', this.submitAll, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.AllData = res.data.datas
            for (var i = 0; i < this.AllData.length; i++) {
              switch (this.AllData[i].id) {
                case 'total_equip':
                  this.total_equip = this.AllData[i].value
                  break;
                case 'off_line':
                  this.off_line = this.AllData[i].value
                  break;
                case 'shutdown':
                  this.shut_down = this.AllData[i].value
                  break;
                case 'on_line':
                  this.on_line = this.AllData[i].value
                  break;
                default:
                  break;
              }
            }
            // this.on_line = this.AllData[9].value
            // this.off_line = this.AllData[10].value
            // this.total_equip = this.AllData[8].value
            // console.log(this.total_equip)
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      // 地图层上方设备列表
      queryAllEquipList() {
        this.submiteAllquipmanage.city_code = this.cityCode
        axios.post('/console', this.submiteAllquipmanage, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.grablistEquip1 = res.data.datas
            this.equipCount = this.grablistEquip1.length
            // console.log(9898, res)
            for (var j = 0; j < this.grablistEquip1[0].cids.length; j++) {
              if (this.grablistEquip1[0].cids[j].indexOf('plc') !== -1) {
                this.plcNumber = this.grablistEquip1[0].cids[j]
              }
            }
            window.localStorage.setItem('num', this.grablistEquip1[0].pid) // 站点编号
            window.localStorage.setItem('Cid', this.grablistEquip1[0].crane_id) // 设备编号
            window.localStorage.setItem('name', this.grablistEquip1[0].name_label) // 设备名称
            window.localStorage.setItem('plc', this.plcNumber) // 网关
            window.localStorage.setItem('proname', this.grablistEquip1[0].project_name) // 项目名称
            window.localStorage.setItem('status', this.grablistEquip1[0].status) // 设备状态
            window.localStorage.setItem('type', this.grablistEquip1[0].type) // 设备类型
            window.localStorage.setItem('stationName', this.grablistEquip1[0].station_name) // 站点名称
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      // 设备类型 暂时没用到
      queryEquipSta() {
        axios.post('/basicdata', this.submiteEquipmanageStatus, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.EquipmanageStatus = res.data.datas
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      // 获取地图坐标信息
      queryMapList() {
        axios.post('/console', this.submiteMap, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.mapLists = res.data.datas
            this.initMap()
          })
          .catch((error) => {
            console.log(error)
          })
      },
      seachMap() {
        // console.log(this.city1.toString())
        if (!this.city1) {
          // console.log(111)
          this.submiteMap.condition.area = ''
        } else {
          this.submiteMap.condition.area = (this.city1).toString()
        }
        console.log(this.submiteMap.condition.area)
        axios.post('/console', this.submiteMap, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.mapLists = res.data.datas
            this.initMap()
            console.log(this.mapLists)
            console.log(this.grablistEquip1)
            if (this.mapLists.length === 0) {
              this.grablistEquip1 = this.mapCountList
              this.equipCount = this.mapCount
            } else {
              this.queryAllEquipList()
            }
          })
          .catch((error) => {
            console.log(error)
          })
        // this.submiteAllquipmanage.city_code = this.submiteMap.condition.area
        // this.queryAllEquipList()
      },
      clearBtn() {
        this.addMirror.city = []
        if (!this.city1) {
          this.submiteMap.condition.area = ''
        } else {
          this.city1 = ''
          this.submiteMap.condition.area = (this.city1).toString()
        }
        this.submiteMap.condition.equip_type = ''
        this.submiteMap.condition.status = ''
        this.submiteMap.condition.name = ''
        this.submiteMap.condition.mainten_expire = ''
        this.submiteMap.condition.verifi_expire = ''
        this.seachMap()
        this.queryAllEquipList()
      },
      // 收起按钮
      showContent() {
        this.btnStatus = !this.btnStatus
      },
      // 跳转到实时监测
      goGrab(val) {
        this.setlocalStorage(val)
        this.$router.push({
          path: '/monitor/homepage/grab',
          query: {
            pid: val.pid
          }
        })
      },
      // 跳转到参数曲线
      goCurvet(val) {
        this.setlocalStorage(val)
        // console.log(val)
        this.$router.push({
          path: '/monitor/curve',
          query: {
            pid: val.pid
          }
        })
      },
      // 跳转到历史查询
      goHistory(val) {
        this.setlocalStorage(val)
        // console.log(val)
        this.$router.push({
          path: '/monitor/history',
          query: {
            pid: val.pid
          }
        })
      },
      goManage(val) {
        this.setlocalStorage(val)
        // console.log(val)
        this.$router.push({
          path: '/monitor/config',
          query: {
            pid: val.pid
          }
        })
      },
      goRemoteUpdate(val) {
        this.setlocalStorage(val)
        // console.log(val)
        this.$router.push({
          path: '/monitor/update',
          query: {
            pid: val.pid
          }
        })
      },
      setlocalStorage(val){
        for (var j = 0; j < val.cids.length; j++) {
          if (val.cids[j].indexOf('plc') !== -1) {
            this.plcNumber = val.cids[j]
          }
        }
        window.localStorage.setItem('num', val.pid) // 站点编号
        window.localStorage.setItem('Cid', val.crane_id) // 设备编号
        window.localStorage.setItem('name', val.name_label) // 设备名称
        window.localStorage.setItem('plc', this.plcNumber) // 网关
        window.localStorage.setItem('proname', val.project_name) // 项目名称
        window.localStorage.setItem('status', val.status) // 设备状态
        window.localStorage.setItem('type', val.type) // 设备类型
        window.localStorage.setItem('stationName', val.station_name) // 站点名称
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .BMap_cpyCtrl {
    display: none;
  }

  /*/deep/ .anchorBL {*/
  /*display: none;*/
  /*}*/
  /*/deep/ .BMap_cpyCtrl a {*/
  /*font-size: 11px;*/
  /*color: red;*/
  /*display: none;*/
  /*}*/
  .ComprehensiveInfo {
    .seachnav {
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top: 0;
      bottom: 0;
      line-height: 55px;
      padding-left: 20px;

      .description {
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }

      .returnnormalpress {
        vertical-align: middle;
        cursor: pointer;
      }

      .equiplist {
        vertical-align: middle;
        margin-left: 10px;
      }

      .searchinvalid {
        vertical-align: middle;
        cursor: pointer;
      }

      .con {
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;

        .seachContent {
          font-size: 18px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          padding-top: 0px;
          color: rgba(51, 51, 51, 1);
        }

        .seachtitle {
          font-size: 12px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
      }
    }

    /deep/ .el-cascader__label {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      padding: 4px 25px 0 15px;
      color: #606266;
      width: 95%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      text-align: left;
      font-size: inherit;
    }

    .homeNav {
      width: 100%;
      height: 50px;
      background-color: #25B6C7;
    }

    .ComprehensiveContent {
      width: 98%;
      height: 45vw;
      margin: 20px 20px;

      /deep/ .gutter {
        background-color: #D8DEE8;
      }

      .Cheader {
        width: 100%;
        height: 40px;

        .title {
          /*border-left: 5px solid #25B6C7;*/
        }

        .rightMapTitle {
          width: 100%;
          height: 30px;
          line-height: 30px;
        }
      }

      .centerList {
        width: 100%;
        height: 842px;

        .rightMap {
          width: 100%;
          height: 820px;
          border: 1px solid #E6E6E6;

          .rightMapTitle1 {
            width: 98.9%;
            height: 50px;
            border-bottom: 1px solid #E6E6E6;
            line-height: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 2;
            position: absolute;
          }

          .bMap {
            width: 100%;
            height: 38.7vw;


            /*}*/
            .showStatus {
              width: 334px;
              height: 0;
              z-index: 1;
              position: relative;
              float: right;

              .hoverImg {
                width: 16px;
                height: 38.6vw;
                position: absolute;
                z-index: 10;
                line-height: 38.6vw;
                cursor: pointer;
                float: left;
              }

              .rightBtn {
                margin-left: 318px;
                position: absolute;
                z-index: 10;
                margin-top: 300px;
                cursor: pointer
              }

              .mapRightList {
                width: 318px;
                height: 42.6vw;
                border-left: 1px solid #E6E6E6;
                background-color: #F9FBFE;
                overflow: auto;
                display: block;
                float: right;

                .YuserName {
                  width: 100%;
                  height: 60px;
                  border-bottom: 1px solid #E6E6E6;
                  padding-left: 20px;

                  .name {
                    font-size: 16px;
                    font-family: MicrosoftYaHei-Bold;
                    font-weight: bold;
                    color: rgba(50, 56, 66, 1);
                  }

                  .name1 {
                    font-size: 16px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: rgba(50, 56, 66, 1);
                  }
                }

                .YuserList {
                  width: 100%;
                  height: 70px;
                  border-bottom: 1px solid #E6E6E6;
                  padding-left: 10px;
                  font-size: 14px;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: rgba(50, 56, 66, 1);
                  line-height: 20px;

                  .listColor {
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: #0072F3;
                    line-height: 20px;
                    cursor: pointer;
                  }
                }
              }

              /*
              @media screen and(min-width: 1366px) {
                .showStatus {
                  width: 334px;
                  height: 21vw;
                  z-index: 10;
                  position: absolute;
                  left: 60%;
                  top: 32%;
                }
                .hoverImg {
                  width: 16px;
                  height: 38.5vw;
                  position: absolute;
                  z-index: 10;
                  line-height: 38.5vw;
                  cursor: pointer;
                  float: left;
                  margin-left: -100px;
                }
                .rightBtn {
                  left: 64.8%;
                  position: absolute;
                  z-index: 10;
                  margin-top: 200px;
                  cursor: pointer
                }
                .mapRightList {
                  width: 318px;
                  height: 38.5vw;
                  border-left: 1px solid #E6E6E6;
                  background-color: #F9FBFE;
                  overflow: auto;
                  display: block;
                  float: right;
                  margin-right: 40%;
                  .YuserName {
                    width: 100%;
                    height: 60px;
                    border-bottom: 1px solid #E6E6E6;
                    padding-left: 20px;
                    .name {
                      font-size: 16px;
                      font-family: MicrosoftYaHei-Bold;
                      font-weight: bold;
                      color: rgba(50, 56, 66, 1);
                    }
                    .name1 {
                      font-size: 12px;
                      font-family: MicrosoftYaHei;
                      font-weight: 400;
                      color: rgba(50, 56, 66, 1);
                    }
                  }
                  .YuserList {
                    width: 100%;
                    height: 70px;
                    border-bottom: 1px solid #E6E6E6;
                    padding-left: 10px;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: rgba(50, 56, 66, 1);
                    line-height: 20px;
                    .listColor {
                      font-size: 12px;
                      font-family: MicrosoftYaHei;
                      font-weight: 400;
                      color: rgba(37, 183, 200, 1);
                      line-height: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }
              @media screen and(min-width: 1440px) {
                .showStatus {
                  width: 334px;
                  height: 30vw;
                  z-index: 10;
                  position: absolute;
                  left: 60%;
                  top: 32%;
                }
                .hoverImg {
                  width: 16px;
                  height: 38.6vw;
                  position: absolute;
                  z-index: 10;
                  line-height: 38.6vw;
                  cursor: pointer;
                  float: left;
                  margin-left: -100px;
                }
                .rightBtn {
                  left: 68.5%;
                  position: absolute;
                  z-index: 10;
                  margin-top: 220px;
                  cursor: pointer
                }
                .mapRightList {
                  width: 318px;
                  height: 38.6vw;
                  background-color: #F9FBFE;
                  overflow: auto;
                  display: block;
                  float: right;
                  margin-right: 30%;
                  .YuserName {
                    width: 100%;
                    height: 60px;
                    border-bottom: 1px solid #E6E6E6;
                    padding-left: 20px;
                    .name {
                      font-size: 16px;
                      font-family: MicrosoftYaHei-Bold;
                      font-weight: bold;
                      color: rgba(50, 56, 66, 1);
                    }
                    .name1 {
                      font-size: 12px;
                      font-family: MicrosoftYaHei;
                      font-weight: 400;
                      color: rgba(50, 56, 66, 1);
                    }
                  }
                  .YuserList {
                    width: 100%;
                    height: 70px;
                    border-bottom: 1px solid #E6E6E6;
                    padding-left: 10px;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: rgba(50, 56, 66, 1);
                    line-height: 20px;
                    .listColor {
                      font-size: 12px;
                      font-family: MicrosoftYaHei;
                      font-weight: 400;
                      color: rgba(37, 183, 200, 1);
                      line-height: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }
              */
              /*
              @media screen and(min-width: 1920px) {
                .showStatus {
                  width: 334px;
                  z-index: 10;
                  position: relative;
                  float: right;
                  top: 32%;
                }
                .hoverImg {
                  width: 16px;
                  height: 44.5vw;
                  position: absolute;
                  z-index: 10;
                  line-height: 44.5vw;
                  cursor: pointer;
                  float: left;
                  margin-left: -4px;
                }
                .rightBtn {
                  left: 95.7%;
                  position: relative;
                  z-index: 10;
                  margin-top: 330px;
                  cursor: pointer
                }
                .mapRightList {
                  width: 318px;
                  height: 42.6vw;
                  border-left: 1px solid #E6E6E6;
                  background-color: #F9FBFE;
                  overflow: auto;
                  display: block;
                  float: right;
                  margin-right: 1%;
                  .YuserName {
                    width: 100%;
                    height: 60px;
                    border-bottom: 1px solid #E6E6E6;
                    padding-left: 20px;
                    .name {
                      font-size: 16px;
                      font-family: MicrosoftYaHei-Bold;
                      font-weight: bold;
                      color: rgba(50, 56, 66, 1);
                    }
                    .name1 {
                      font-size: 12px;
                      font-family: MicrosoftYaHei;
                      font-weight: 400;
                      color: rgba(50, 56, 66, 1);
                    }
                  }
                  .YuserList {
                    width: 100%;
                    height: 70px;
                    border-bottom: 1px solid #E6E6E6;
                    padding-left: 10px;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: rgba(50, 56, 66, 1);
                    line-height: 20px;
                    .listColor {
                      font-size: 12px;
                      font-family: MicrosoftYaHei;
                      font-weight: 400;
                      color: rgba(37, 183, 200, 1);
                      line-height: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }
              */
              .mapRightList {

                /*width: 318px;*/
                /*height: 20.6vw;*/
                /*border-left: 1px solid #E6E6E6;*/
                /*background-color: #F9FBFE;*/
                /*overflow: auto;*/
                /*display: block;*/
                /*float: right;*/
                .YuserName {
                  width: 100%;
                  height: 60px;
                  border-bottom: 1px solid #E6E6E6;
                  padding-left: 20px;

                  .name {
                    font-size: 16px;
                    font-family: MicrosoftYaHei-Bold;
                    font-weight: bold;
                    color: rgba(50, 56, 66, 1);
                  }

                  .name1 {
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: rgba(50, 56, 66, 1);
                  }
                }

                .YuserList {
                  width: 100%;
                  height: 70px;
                  border-bottom: 1px solid #E6E6E6;
                  padding-left: 10px;
                  font-size: 14px;
                  font-family: MicrosoftYaHei;
                  font-weight: 400;
                  color: rgba(50, 56, 66, 1);
                  line-height: 20px;

                  .listColor {
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    color: #0072F3;
                    line-height: 20px;
                    cursor: pointer;
                  }
                }
              }
            }

          }

          /deep/ .el-form-item__label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 53px;
            padding: 0 12px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
          }

          /deep/ .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
            margin-top: 5px;
          }

          /deep/ .el-input__inner {
            height: 30px;
            line-height: 30px;
          }

          /deep/ .el-button--primary {
            margin-top: 10px;
          }

          /deep/ .el-button--info {
            margin-top: 10px;
          }

        }
      }
    }

  }

</style>
